@import '../core/variables.less';
@import '../theme/index.less';

@ant-popover: ant-popover;
.@{ant-popover} {
    z-index: @mi-z-index-modal;

    &-content {
        .border-radius();
        border: 1px solid var(--mi-theme, @mi-theme);
    }

    &-content &-arrow {
        &-content {
            .properties(width, 8);
            .properties(height, 8);
            .properties(border-width, 1);
            border-style: solid;
            border-color: var(--mi-theme, @mi-theme);
            background-color: var(--mi-dark, @mi-dark);
        }
    }

    &-inner {
        background-color: var(--mi-dark, @mi-dark);
        .border-radius();
        z-index: -1;
    }

    &-message-title {
        color: var(--mi-font, @mi-font);

        .theme {
            color: var(--mi-theme, @mi-theme);
        }

        .title-limit {
            .flex(center, flex-start);
            flex-wrap: wrap;
        }
    }

    &-placement-topRight &-arrow,
    &-placement-topLeft &-arrow,
    &-placement-top &-arrow {
        .properties(bottom, 2.5);
    }

    &-placement-leftTop &-arrow,
    &-placement-leftBottom &-arrow,
    &-placement-left &-arrow {
        .properties(right, 2.5);
    }

    &-placement-bottomLeft &-arrow,
    &-placement-bottomRight &-arrow,
    &-placement-bottom &-arrow {
        .properties(top, 2.5);
    }

    &-placement-rightTop &-arrow,
    &-placement-rightBottom &-arrow,
    &-placement-right &-arrow {
        .properties(left, 2.5);
    }

    &-placement-bottom &-arrow {
        .properties(margin-top, 1);
    }
}